<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格网格系统</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-color: black">

<div style="background-color: #2b542c">4</div>
<div style="background-color: #1b6d85">8</div>
<hr>

<!--

  栅格网格系统
    1、列组合
        列总和数不能超12，大于12，则自动换到下行
    2、列偏移
        只需要在列元素上添加类名"col-md-offset-*"（其中心号代表要偏移的列组合数）
        ，那么具有这个类名的列就会向右偏移
    3、列排序
        列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离
    4、列嵌套
        Bootstrap框架的网格系统还支持列的嵌套。
        你可以在一个列中添加一个或者多个行(row)容器，然后在这个行容器中插入列。
-->

<!--  布局容器 -->
<div class="container">
  <!-- 行元素 -->
  <div class="row">
    <!--  列元素  col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
    <div>
      <div class="col-lg-4 col-md-4" style="background-color: blueviolet">4</div>
      <div class="col-lg-8" style="background-color: #2aabd2">8</div>
    </div>
  </div>
  <hr>

    <!-- 列组合 -->
    <div class="row">
        <div class="col-lg-1" style="background-color: #8c8c8c">1</div>
        <div class="col-lg-1" style="background-color: #269abc">2</div>
        <div class="col-lg-1" style="background-color: #449d44">3</div>
        <div class="col-lg-1" style="background-color: #28644d">4</div>
        <div class="col-lg-1" style="background-color: #d58512">5</div>
    </div>

    <!-- 列组合 -->
    <div class="row">
      <div class="col-lg-6" style="background-color: #48792b">1</div>
      <div class="col-lg-6" style="background-color: #337ab7">1</div>
    </div>

                            <hr><!--换行-->

  <!--列偏移-->
  <div class="row">
    <div class="col-lg-4" style="background-color: #379327">1</div>
    <div class="col-md-offset-8" style="background-color: #337ab7">55</div>
  </div>

                            <hr><!--换行-->

  <!--无论是列组合还是列偏移，列的总数不能超过12 ！！！-->
  <div class="row">
    <div class="col-lg-5" style="background-color: #3b4779">列的总数不能超过12</div>
    <div class="col-lg-4" style="background-color: #337ab7">列的总数不能超过12</div>
    <div class="col-lg-4" style="background-color: #985f0d">列的总数不能超过12</div>
  </div>

                                        <hr>

    <!--列排序-->
    <div class="row">
        <div class="col-lg-1" style="background-color: #379327">1</div>
        <div class="col-lg-1 col-md-push-3" style="background-color: #4e00ff">55</div>
        <div class="col-lg-1" style="background-color: #b61daa">555</div>
        <div class="col-lg-1 col-md-pull-2" style="background-color: #337ab7">5555</div>
    </div>


                                        <hr>

    <!--列排序-->
    <div class="row">
        <div class="col-lg-6" style="background-color: #ffcc00">
            <div class="row">
                <div class="col-lg-1" style="background-color: #337ab7">1</div>
                <div class="col-lg-9" style="background-color: #6700ff">1</div>
                <div class="col-lg-1" style="background-color: #ff0000">1</div>
                <div class="col-lg-1" style="background-color: #5eff00">1</div>
            </div>
        </div>
        <div class="col-lg-6" style="background-color: #ff7c00">
            2
        </div>
    </div>

                                    <hr>
    <!--打开检查、会发现行并没有改变-->
    <div class="row">
        <div class="col-lg-3 col-sm-3" style="background-color: #ac00ff">4</div>
        <div class="col-lg-3 col-sm-3" style="background-color: #0047ff">4</div>
        <div class="col-lg-3 col-sm-3" style="background-color: #3e8558">4</div>
        <div class="col-lg-3 col-sm-3" style="background-color: #ffac00">4</div>
    </div>
</div>
</body>
</html>